<div class="dialog-wrap">
    <div class="fold-modular" lay-filter="foldModular"></div>
    <button class="layui-hide" id="addRootNode">增加文件夹</button>
</div>

<script type="text/html" id="folderTemp">
    <div class="dialog-wrap">
        <div style="padding-top: 30px;">
            <div class="layui-row">
                <div class="layui-form-item">
                    <label class="layui-form-label">收藏夹名<span class="color-red">*</span></label>
                    <div class="layui-input-block">
                        {{#  if(JSON.stringify(d)=='{}'){ }}
                        <input type="text" name="nameCn" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                        {{#  } else { }}
                        <input type="text" name="nameCn" lay-verify="required" value="{{d.nameCn}}" placeholder="请输入" autocomplete="off" class="layui-input">
                        <input type="hidden" name="parentId" lay-verify="required" value="{{d.id}}" class="layui-input">
                        {{#  } }}
                    </div>
                </div>
                <button class="layui-btn layui-hide" lay-submit lay-filter="foldSub">立即提交</button>
            </div>
        </div>
    </div>
</script>
<script>
    layui.use(['form', 'laytpl', 'eleTree', 'utils'], function () {
        var $ = layui.jquery,
            form = layui.form,
            layer = layui.layer,
            laytpl = layui.laytpl,
            eleTree = layui.eleTree,
            utils = layui.utils;

        // 初始化
        var foldTreeEl = eleTree.render({
            elem: '.fold-modular',
            url: 'api/common/folder.json',
            showLine: true,
            request: {
                name: "nameCn",
                key: "id",
                children: "children",
                isLeaf: "isleaf"
            },
            response: {
                statusName: "code",
                statusCode: 200,
                dataName: "data"
            },
            showCheckbox: true,
            checkStrictly: true,
            parseData: function (data) {
                return utils.dataToTree(data)
            },
            contextmenuList: [
                {
                    eventName: "foldEdit",
                    text: "编辑收藏夹"
                },
                {
                    eventName: "foldAdd",
                    text: "增加子收藏夹"
                },
                {
                    eventName: "foldDel",
                    text: "删除收藏夹"
                }
            ]
        });

        // 编辑
        eleTree.on("nodeFoldEdit(foldModular)", function (d) {
            var _data = d.data;
            laytpl($('#folderTemp').html()).render(_data, function(html){
                layer.open({
                    title: '收藏夹',
                    area: ['580px', '300px'],
                    maxHeight: '500px',
                    type: 1,
                    shade: 0,
                    content: html,
                    btn: ['保存', '取消'],
                    btnAlign: 'c',
                    success: function(layero, index){
                        layero.addClass('layui-form');
                        layero.find('.layui-layer-btn0').attr({'lay-filter':'foldSub', 'lay-submit':''});
                        form.render();
                        form.on('submit(foldSub)', function(data) {
                            _data.nameCn = data.field.nameCn
                            var reqData = {
                                id: _data.id,
                                nameCn: data.field.nameCn
                            }
                            utils.Ajax({
                                url: 'api/common/folderEdit.json',
                                dataType: 'json',
                                type: 'post',
                                data: reqData,
                                success: function (response) {
                                    layer.msg(response.message, {time: 1000});
                                    foldTreeEl.updateKeySelf(_data.id, response.data);
                                    layer.close(index);
                                }
                            });
                            return false;
                        });
                    },
                    yes: function(index, layero){
                        return false;
                    }
                });

            });
        })

        // 增加
        eleTree.on("nodeFoldAdd(foldModular)", function (d) {
            var _data = d.data;
            console.log(_data)
            laytpl($('#folderTemp').html()).render({}, function(html){
                layer.open({
                    title: '收藏夹',
                    area: ['580px', '300px'],
                    maxHeight: '500px',
                    type: 1,
                    shade: 0,
                    content: html,
                    btn: ['保存', '取消'],
                    btnAlign: 'c',
                    success: function(layero, index){
                        layero.addClass('layui-form');
                        layero.find('.layui-layer-btn0').attr({'lay-filter':'foldSub', 'lay-submit':''});
                        form.render();
                        form.on('submit(foldSub)', function(data) {
                            var reqData = {
                                parentId: _data.id,
                                nameCn: data.field.nameCn
                            }
                            utils.Ajax({
                                url: 'api/common/folderEdit.json',
                                dataType: 'json',
                                type: 'post',
                                data: reqData,
                                success: function (response) {
                                    layer.msg(response.message, {time: 1000});
                                    foldTreeEl.append( _data.id, response.data);
                                    layer.close(index);
                                }
                            });
                            return false;
                        });
                    },
                    yes: function(index, layero){
                        return false;
                    }
                });
            });
        })

        // 删除
        eleTree.on("nodeFoldDel(foldModular)", function (d) {
            var _data = d.data;
            layer.alert('确定要删除吗？', {title: '收藏夹', btn: ['确定'], shade: 0}, function (index) {
                utils.Ajax({
                    url: 'api/common/folder.json',
                    dataType: 'json',
                    type: 'post',
                    data: {id: _data.id},
                    success: function (response) {
                        layer.msg(response.message, {time: 1000});
                        foldTreeEl.remove(_data.id);
                        layer.close(index);
                    }
                });
            });
        })

        // 添加根节点
        $('#addRootNode').on('click', function () {
            laytpl($('#folderTemp').html()).render({}, function(html){
                layer.open({
                    title: '收藏夹',
                    area: ['580px', '300px'],
                    maxHeight: '500px',
                    type: 1,
                    shade: 0,
                    content: html,
                    btn: ['保存', '取消'],
                    btnAlign: 'c',
                    success: function(layero, index){
                        layero.addClass('layui-form');
                        layero.find('.layui-layer-btn0').attr({'lay-filter':'foldSub', 'lay-submit':''});
                        form.render();
                        form.on('submit(foldSub)', function(data) {
                            var reqData = {
                                parentId: null,
                                nameCn: data.field.nameCn
                            }
                            utils.Ajax({
                                url: 'api/common/folderEdit.json',
                                dataType: 'json',
                                type: 'post',
                                data: reqData,
                                success: function (response) {
                                    layer.msg(response.message, {time: 1000});
                                    foldTreeEl.append(null, response.data);
                                    layer.close(index);

                                    window.thatFolderMenu.getMenuInfo();
                                }
                            });
                            return false;
                        });
                    },
                    yes: function(index, layero){
                        return false;
                    }
                });
            });
        })
    })
</script>
